<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
        <div id="myImg"></div>
    </div>
</template>

<script>
  import {ref, h, onMounted, render} from 'vue'

  function getListApi() {
    return Promise.resolve({
      name: "Gene"
    })
  }

  export default {
    name: 'HelloWorld',
    props: {
      msg: String
    },
    /**
     *  setup选项: 默认会先执行一次
     *      1. setup 函数接收一个 props参数和一个 context 对象
     *      2. 注意 props 函数依然需要在当前组件里声明.
     *      3. 返回一个对象, 返回的任何内容, 都可以用在组件的其他部分
     */

    // setup(props, ctx) {
    //   console.log('setup-->', props.msg,ctx);
    //
    //   const getList = async (props) => {
    //     // 假定 getListApi 这是一个调用接口的函数
    //     const result = await getListApi()
    //     console.log(123123, result);
    //     return false
    //   }
    //   // 在setup内注册声明周期勾子函数,这个 onMounted 声明周期勾子函数,对应 mounted 勾子函数, 当 mounted 勾子函数被组件调用时,
    //   // 注册的 getList 回调将会被执行(自动执行)
    //   onMounted(getList)
    //   return {
    //     getList
    //   }
    // },
    components: {
      // myImg
    },
    setup(props, ctx) {
      console.log("%c返回函数的setup ---->>", "color:red", props, ctx);

      const myImg = h('h2', {style: {color: 'red'}}, "hello, 我是 h函数创建出来, render函数渲染的h1标签!")
      console.log(myImg);
      /**
       *  h 函数, 标签名, 属性, children
       */
      // render(myImg, "#myImg")
      onMounted(() => {
        console.log('onMoutedd-------')
        const container = document.getElementById('myImg')
        render(myImg, container)
      })
      return {}
      // return () => h('h1', {style: "color:red"}, 'hello i am function return')

    },
    mounted() {
      // this.getList()
    }

    // ... 组件的其余部分
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    h3 {
        margin: 40px 0 0;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        display: inline-block;
        margin: 0 10px;
    }

    a {
        color: #42b983;
    }
</style>
